<template>
  <div>
   <div style="float: left">
     <el-form inline>
       <el-form-item label="医院名字">
        <el-input v-model="hosptialName" placeholder="请输入医院名字" @input="query"></el-input>
       </el-form-item>
       <el-form-item label="医院等级">
         <el-select v-model="hospitalLv" class="m-2" placeholder="Select" size="default" @change ="query">
           <el-option label="全部" value=""/>
           <el-option label="三级特等" value="三级特等"/>
           <el-option label="三级甲等" value="三级甲等"/>
           <el-option label="三级已等" value="三级已等"/>
           <el-option label="三级丙等" value="三级丙等"/>
           <el-option label="二级甲等" value="二级甲等"/>
           <el-option label="二级已等" value="二级已等"/>
           <el-option label="二级丙等" value="二级丙等"/>
           <el-option label="一级甲等" value="一级甲等"/>
           <el-option label="一级已等" value="一级已等"/>
           <el-option label="一级丙等" value="一级丙等"/>
         </el-select>
       </el-form-item>
     </el-form>
   </div>
    <div style="  display: table;  clear: both;"></div>
  <el-tabs  class="demo-tabs">
    <el-tab-pane label="医院信息" name="0">
      <div>
          <el-table :data="hospitalList" style="width: 100%">
            <el-table-column fixed="left" prop="hospitalName" label="医院名字"  />
            <el-table-column  prop="hospitalLv" label="医院等级" >
              <template #default="scope" >
                <el-tag >{{scope.row.hospitalLv}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column  prop="hospitalInternet" label="互联网医院" >
              <template #default="scope" >
                <el-tag  v-if="scope.row.hospitalInternet ==0">否</el-tag>
                <el-tag type="danger"  v-if="scope.row.hospitalInternet ==1">是</el-tag>
              </template>
            </el-table-column>
            <el-table-column  prop="keyDepartment" label="重点科室" ></el-table-column>
            <el-table-column  prop="hospitalService" label="门诊量" ></el-table-column>
            <el-table-column  prop="targetDepartment" label="目标科室" >
              <template #default="scope" >
                <el-tag type="warning">{{scope.row.targetDepartment}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column  prop="mainPatientTypes" label="主要患者类型" ></el-table-column>
            <el-table-column  prop="dealer" label="经销商" ></el-table-column>
            <el-table-column fixed="right" label="操作" >
              <template #default = "s">
                <el-button link type="primary" size="small" @click="lookHospitalInfo(s.row,1)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
      </div>
    </el-tab-pane>
  </el-tabs>
    <div style="float: right;padding-top: 1%">
      <el-pagination
          v-model:current-page="pageNum"
          v-model:page-size="pageSize"
          background layout="prev, pager, next"
          :total="total"
          @current-change="handleCurrentChange"/>
    </div>
</div>
  <div v-if="lookConfrimFlag">
    <el-dialog v-model="lookConfrimFlag" title="详细信息" width="1200" fullscreen>
      <el-descriptions
          class="margin-top"
          :title="lookinfo.hospitalName+' 详细信息'"
          :column="6"
          border
      >
        <template #extra>
<!--          <el-button type="primary">Operation</el-button>-->
        </template>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              医院名称
            </div>
          </template>
          {{lookinfo.hospitalName}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              医院等级
            </div>
          </template>
          {{lookinfo.hospitalLv}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              医联体
            </div>
          </template>
          {{lookinfo.hospitalConsortium}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              互联网医院
            </div>
          </template>
          <el-tag v-if="lookinfo.hospitalInternet == 0">否</el-tag>
          <el-tag type="danger" v-if="lookinfo.hospitalInternet == 1">是</el-tag>
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              重点科室
            </div>
          </template>
          {{lookinfo.keyDepartment}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              医院床位
            </div>
          </template>
          {{lookinfo.hospitalBad}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              医院门诊量
            </div>
          </template>
          {{lookinfo.hospitalService}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              医生数
            </div>
          </template>
          {{lookinfo.doctorNumber}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              目标科室
            </div>
          </template>
          {{lookinfo.targetDepartment}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              高级职称数
            </div>
          </template>
          {{lookinfo.highNumber}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              心理医生资质数
            </div>
          </template>
          {{lookinfo.psychologistNumber}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              主要患者类型
            </div>
          </template>
          {{lookinfo.mainPatientTypes}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              科室主要挂牌
            </div>
          </template>
          {{lookinfo.mainDepartmentListing}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              科室负责人
            </div>
          </template>
          {{lookinfo.headMan}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              项目关键科室
            </div>
          </template>
          {{lookinfo.projectKeyDepartment}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              分管领导
            </div>
          </template>
          {{lookinfo.leader}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              经销商
            </div>
          </template>
          {{lookinfo.dealer}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              经销商负责人
            </div>
          </template>
          {{lookinfo.dealerHeadMan}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              电话
            </div>
          </template>
          {{lookinfo.phone}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              第一次沟通时间
            </div>
          </template>
          {{lookinfo.fristCountTime}}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              医院有无相关产品
            </div>
          </template>
          {{lookinfo.fightFlag == 0?"无":"有"}}
        </el-descriptions-item>
      </el-descriptions>
      <div style="margin-top: 1%">
        <el-row>
          <el-col :span="4"><div style="font-weight: bolder;font-size: 1.2rem;vertical-align: middle">项目有无竞品和基本情况</div></el-col>
          <el-col :span="20">
            <el-input v-model="lookinfo.fightInformation" readonly disabled type="textarea"> </el-input>
          </el-col>
        </el-row>
      </div>
      <div style="margin-top: 1%">
        <el-row>
          <el-col :span="4"><div style="font-weight: bolder;font-size: 1.2rem;vertical-align: middle">医院图片</div></el-col>
          <el-col :span="20">
           <div v-if="lookinfo.img == null">
             无
           </div>
            <div v-if="lookinfo.img != null">
              <div  v-for="item in lookinfo.img">
                <img :src="item" alt="" style="height: 50%;width: 50%" >
              </div>

            </div>
          </el-col>
        </el-row>
      </div>
    </el-dialog>

  </div>
</template>
<script setup lang="ts">
  import { format } from 'date-fns';
  import {onMounted, reactive, ref} from "vue";
  import {useUsersStore} from "../../store/userInfo.ts";
  import {ElMessage} from "element-plus";
  import {getAllHospitalInfo, getConfrimHospitalInfo, getUnConfrimHospitalInfo} from "../../api/system";
  const store = useUsersStore();
  const { name, role, token } = store;
  let pageNum = ref(1);
  let pageSize = ref(10);
  let total = ref(0)
  let hospitalList = ref([])
  let confrimhospitalList = ref([])
  let hosptialName  = ref('')
  let hospitalLv = ref('')
  let unconfrimhospitalList = ref([])
  let lookinfo =ref({
    img:null
  })
  let lookConfrimFlag = ref(false)
  onMounted(async () =>{
    await query();

  })
  const query = async () =>{
    let res = await getAllHospitalInfo({pageNum:pageNum.value, pageSize:pageSize.value,hosptialName: hosptialName.value,hospitalLv:hospitalLv.value});
    hospitalList.value = res.data.data.list
    total.value = res.data.data.total
  }

  const lookHospitalInfo =async (row,flag) => {
    lookinfo.value = { ...row }; // 创建一个新的对象，并将 row 中的属性复制给 lookinfo
    if (flag === 1) {
      if (lookinfo.value.img != null && lookinfo.value.img != '') {
        lookinfo.value.img = lookinfo.value.img.split(",");
      } else {
        lookinfo.value.img = null;
      }
      lookConfrimFlag.value = true;
    }

  }
  const handleCurrentChange = async (val: number) => {
    pageNum.value = val;
    await query()
  }
</script>

<style scoped>

</style>
